<template>
    <div class="detail">
        <!--头部-->
        <nav>
            <div @click="back">
                <svg
                        t="1598572181603"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2140"
                        width="200"
                        height="200"
                >
                    <path d="M702.94996 958.89419c-8.375761 0-16.751522-3.196809-23.14514-9.590426L265.159102 534.658046c-12.787234-12.777001-12.787234-33.513278 0-46.289256L679.80482 73.722048c12.787234-12.787234 33.502022-12.787234 46.289256 0 12.787234 12.777001 12.787234 33.513278 0 46.289256L334.593498 511.512906l391.501602 391.501602c12.787234 12.777001 12.787234 33.513278 0 46.289256C719.701482 955.697381 711.325721 958.89419 702.94996 958.89419z"
                          p-id="2141"
                    />
                </svg>
            </div>
            <div>课程详情</div>
            <div @click="share">
                <svg
                        t="1598572056863"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2356"
                        width="200"
                        height="200"
                >
                    <path
                            d="M845.33 678.67a166.26 166.26 0 0 0-126.71 58.67c-0.47-0.23-0.76-0.65-1.25-0.86L333.93 572.14a163.67 163.67 0 0 0 7.29-96.47l377.59-188.8a166.24 166.24 0 0 0 126.52 58.46c91.91 0 166.67-74.76 166.67-166.67S937.24 12 845.33 12 678.67 86.76 678.67 178.67a165.56 165.56 0 0 0 11.5 60.41L320 424.14c-29.46-47.22-81.72-78.81-141.37-78.81C86.76 345.33 12 420.09 12 512s74.76 166.67 166.67 166.67A166.26 166.26 0 0 0 305.37 620c0.47 0.23 0.76 0.65 1.25 0.86l383.45 164.33a165.54 165.54 0 0 0-11.4 60.14c0 91.91 74.76 166.67 166.67 166.67S1012 937.24 1012 845.33s-74.76-166.66-166.67-166.66z m0-611.11a111.11 111.11 0 1 1-111.11 111.11A111.22 111.22 0 0 1 845.33 67.56zM178.67 623.11A111.11 111.11 0 1 1 289.78 512a111.22 111.22 0 0 1-111.11 111.11z m666.66 333.33a111.11 111.11 0 1 1 111.11-111.11 111.22 111.22 0 0 1-111.11 111.11z"
                            p-id="2357"
                    />
                </svg>
            </div>
        </nav>
        <!--收藏-->
        <div class="detail-baby">
            <div class="detail-baby-item">
                <div class="collec" @click="Collect">
                    <van-rate size="25" :value="collect" count="1"/>
                </div>
                <div style="width: 85%;">{{title}}</div>
                <div>
                    <span v-if="price === 0" style="color:#eb6100">免费</span>
                    <span v-if="price !== 0" style="color: red">
            <img
                    style="width:3.2vw;"
                    src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20191HHDExgz0u1567065946.png"
                    alt
            />
            {{price | prices}}
          </span>
                </div>
                <div>
                    <span>共{{totalPeriods}}课时</span> |
                    <span>{{salesNum}}人已报名</span>
                </div>
                <div style="font-size: 4vw;color: rgba(0,0,0,.45);">
                    <span>开课时间：</span>
                    <span>{{years}}.{{startPlayDate | date}} - {{years}}.{{endPlayDate | date}} </span>
                </div>
            </div>
        </div>
        <!--教学-->
        <div class="detail-teach">
            <div>教学团队</div>
            <div>
                <img :src="img"/>
                <div>{{teacherName}}</div>
            </div>
        </div>
        <!--课程介绍-->
        <div class="detail-course">
            <div>课程介绍</div>
            <div v-html="detailTeach"></div>
        </div>
        <!--课程大纲-->
        <div class="detail-course">
            <div>课程大纲</div>
            <div class="detail_wrapper">
                <section
                        v-if="courseChapterItem.length !== 0"
                        v-for="(item,index) in courseChapterItem"
                        @click="gotoVideo(item.video_id)"
                        :key="index"
                >
                    <div class="detail_div">
                        <span v-if="item.play_type ===4">回放</span>
                        <p style="line-height: 8vw;width: 80%; font-size: 3.2vw;color: #595959;margin-left:5px"
                        >{{item.periods_title}}</p>
                    </div>
                    <p v-if="item.teachers[0].teacher_name !==1"
                       style="font-size: 3.2vw;color: #8c8c8c;padding-left: 6.66667vw;">
                        <span>{{item.teachers[0].teacher_name}}</span>
                        <span style="margin-left:10px">{{item.start_play}} - {{item.end_play}}</span>
                    </p>
                </section>
            </div>
        </div>
        <!--课程评论-->
        <div class="detail-critic">
            <div>课程评论</div>

            <!--课程评论  空的时候-->
            <div class="detail_img" v-if="courseCommentItem.length ===0">
                <img src="https://wap.365msmk.com/img/empty.0d284c2e.png" alt/>
            </div>

            <!-- 课程评论 有评论的时候 -->
            <Comment
                    v-if="courseCommentItem.length !==0"
                    v-for="(item,index) in courseCommentItem"
                    :key="index"
                    :img="item.avatar"
                    :phone="item.nickname"
                    :star="item.grade"
                    :time="item.created_at"
                    :title="item.content"
            ></Comment>
        </div>
        <van-popup v-model="showImg">
            <img :src="imrUrl" alt="">
        </van-popup>
        <!--报名-->
        <div class="btn" @click="buy">{{is_buy===0?'立即报名':'立即学习'}}</div>
    </div>
</template>

<script>
    import Comment from "../../components/home/Comment";
    import moment from "moment";
    import QRCode from 'qrcode'

    export default {
        name: "Course",
        components: {
            Comment,
        },
        computed: {
            //是否已购买
            is_buy() {
                return this.$store.state.courses.is_buy;
            },
            title() {
                //标题
                return this.$store.state.courses.title;
            },
            price() {
                //价格
                return this.$store.state.courses.price;
            },
            totalPeriods() {
                //课时
                return this.$store.state.courses.totalPeriods;
            },
            salesNum() {
                //报名人数
                return this.$store.state.courses.salesNum;
            },
            img() {
                //图片
                return this.$store.state.courses.img;
            },
            teacherName() {
                //老师名字
                return this.$store.state.courses.teacherName;
            },
            detailTeach() {
                //课程介绍
                return this.$store.state.courses.detailTeach;
            },
            // 课程详情页评价
            courseCommentItem() {
                return this.$store.state.courses.courseCommentItem;
            },
            // 课程详情页评价  课程大纲
            courseChapterItem() {
                return this.$store.state.courses.courseChapterItem;
            },
            // 开课时间 年
            years() {
                return this.$store.state.courses.years
            },
            // 开课时间 月
            startPlayDate() {
                return this.$store.state.courses.startPlayDate
            },
            // 开课时间 日
            endPlayDate() {
                return this.$store.state.courses.endPlayDate
            },
            //收藏
            collect() {
                return this.$store.state.courses.collect;
            }

        },
        data() {
            return {
                showImg: false,
                imrUrl: '',
                id: '',
            }
        },
        methods: {
            //去播放视频
            gotoVideo(videoId) {
                this.$router.push({
                    path: '/videokc',
                    query: {
                        videoId,
                        id: this.id
                    }
                })
            },
            //分享
            share() {
                let url = window.location.href
                console.log(url)
                console.log(this.$route.params)
                QRCode.toDataURL(url)
                    .then(url => {
                        console.log(url)
                        this.imrUrl = url;
                        this.showImg = true;
                    })
                    .catch(err => {
                        console.error(err)
                    })
            },
            //返回
            back() {
                window.history.back();
            },
            //收藏
            Collect() {
                this.$store.commit('COLLECT')
            },
            //立即报名
            buy() {

            }
        },
        mounted() {
            let id = this.$route.query.id;
            this.id = id;
            this.$store.dispatch("GETBASIS", id); //获取课程详情信息
            this.$store.dispatch("courseComment", id); //获取课程详情信息  评论
            this.$store.dispatch("courseChapter", id); //获取课程详情信息  课程大纲
        },
        filters: {
            prices(data) {
                return data / 100 + ".00";
            },
            date(date) {
                return `${moment(date * 1000).format('MM.DD HH:mm')}`;
            },
        },
    };
</script>

<style scoped lang="scss">
    .detail-course {
        width: 100%;

        /deep/ img {
            width: 100%;
        }
    }

    .icon {
        width: 30px;
        margin: 0 20px;
    }

    .detail {
        width: 100%;
        background: #f0f2f5;

        nav {
            width: 100%;
            background: white;
            height: 12vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.3vw solid #eeeeee;
            font-size: 4.8vw;
            color: #595959;

            use {
                color: #ffa9ac;
            }
        }

        .detail-baby {
            background: white;
            padding: 4vw 2vw 4vw 3vw;

            .detail-baby-item {
                position: relative;

                .collec {
                    position: absolute;
                    right: 10px;
                    top: -30px;
                }


                div {
                    margin-top: 2.5vw;
                    font-size: 4vw;
                }

                div:nth-child(1) {
                    font-size: 4.26667vw;
                }

                div:nth-child(3) {
                    color: rgba(0, 0, 0, 0.45);
                }
            }
        }

        .detail-teach {
            width: 100%;
            margin: 4vw 0;
            background: white;

            > div:nth-child(1) {
                padding: 4vw;
                font-size: 30px;
            }

            > div:nth-child(2) {
                margin-left: 8vw;

                div {
                    margin-top: 10px;
                }

                img {
                    width: 10vw;
                    margin: 1vw 0 0.4vw 0;
                    height: 10vw;
                    border-radius: 50%;
                }

                color: #595959;
                font-size: 3.2vw;
                padding-bottom: 4vw;
            }
        }

        .detail-course {
            width: 100%;
            margin-bottom: 4vw;
            background: white;

            > div:nth-child(1) {
                padding: 4vw;
                font-size: 30px;
            }

            > div:nth-child(2) {
                margin: 0 0 0 6vw;
                padding-bottom: 2vw;
                font-size: 29px;
            }
        }

        .detail-course-item {
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 4vw;
            line-height: 8vw;
            font-size: 2vw;
            color: #595959;

            ::before {
                content: "";
                position: absolute;
                left: 0.53333vw;
                top: 50%;
                transform: translateY(-50%);
                width: 1.06667vw;
                height: 1.06667vw;
                border-radius: 50%;
                background: #eb6100;
            }
        }

        .detail_wrapper {
            section {
                padding: 2.66667vw 0 0 0;

                .detail_div {
                    display: flex;
                    align-items: center;

                    span {
                        background: #ea7a2f;
                        color: #fff;
                        display: inline-block;
                        margin-right: 1.33333vw;
                        padding: 0 1.33333vw;
                        height: 4.8vw;
                        border-radius: 0.53333vw;
                        font-size: 3.2vw;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: hsla(0, 0%, 100%, 0.85);
                        line-height: 4.8vw;
                        text-align: center;
                    }
                }

                .detail_div::after {
                    content: "";
                    position: absolute;
                    left: 2vw;
                    width: 1.06667vw;
                    height: 1.06667vw;
                    border-radius: 50%;
                    background: #eb6100;
                }
            }
        }

        .detail-critic {
            width: 100%;
            background: white;
            padding-bottom: 6vw;
            margin-bottom: 12vw;

            div:nth-child(1) {
                padding: 2vw;
                font-size: 30px;
            }

            .detail_img {
                display: flex;
                justify-content: center;

                img {
                    width: 36vw;
                }
            }
        }

        .btn {
            width: 100vw;
            position: fixed;
            left: 0;
            bottom: 0;
            color: white;
            background: #eb6100;
            height: 12vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4.6vw;
        }

        .im {
            width: 3vw;
            height: 3vw;
            margin-right: 2vw;
        }
    }
</style>